<template>
  <div>
    <homeHead
      :peopleList="memberModal"
      :showLeft="true"
      :name="listData.题名"
    ></homeHead>
    <!-- cnki知识 -->
    <template v-if="cnki">
      <iframe
        frameborder="0"
        style=" width: 100%; height: calc(100vh - 60px)"
        :src="iframeUrl"
      >
      </iframe>
    </template>
    <!-- 本地数据 -->
    <template v-else>
      <div class="menu">
        <h2 class="title">{{ listData.题名 }}</h2>
        <div class="tab">
          <template v-if="listData.作者">
            <ul v-for="(item, index) in listData.作者.split(';')" :key="index">
              <li>{{ item }}</li>
            </ul>
          </template>
          <template v-if="listData.上传人">
            <ul
              v-for="(item, index) in listData.上传人.split(';')"
              :key="index"
            >
              <li>{{ item }}</li>
            </ul>
          </template>
        </div>
        <div class="btn">
          <ul>
            <li @click="collect">
              <span v-if="listData.是否收藏 === '0'" class="iconfont"
                >&#xe6a9;</span
              >
              <span v-else class="iconfont">&#xe60a;</span>
              <span>收藏</span>
            </li>
            <li @click="recommond">
              <span class="iconfont">&#xe63b;</span>
              <span>推荐</span>
            </li>
            <li @click="thumbDown('down')">
              <span v-if="!isDown" class="iconfont">&#xe6cb;</span>
              <span v-else class="iconfont">&#xe665;</span>
              <span style="color: #f3bb72" v-if="downNum">{{ downNum }}</span>
              <span>踩</span>
            </li>
            <li @click="thumbDown('up')">
              <span v-if="!isThumb" class="iconfont">&#xe6c9;</span>
              <span v-else class="iconfont">&#xe639;</span>
              <span style="color: #f3bb72" v-if="thumbNum">{{ thumbNum }}</span>
              <span>赞</span>
            </li>
          </ul>
        </div>
        <div class="text">
          <span>{{ listData.全文 }}</span>
        </div>
        <div class="classData">
          <div class="line">
            <span class="name">体系分类:</span>
            <span class="text">
              {{ listData.体系分类 }}
            </span>
          </div>
          <div class="line">
            <span class="name">专业分类:</span>
            <span class="text">
              {{ listData.油气管道专业 }}
            </span>
          </div>
          <div class="line2">
            <span class="name">知识分类:</span>
            <span class="text text1">
              {{ listData.知识分类 }}
            </span>
          </div>
          <div class="line2">
            <span class="name">知识层级:</span>
            <span class="text">
              {{ listData.知识层级 }}
            </span>
          </div>
        </div>
        <div class="file">
          <span class="name">
            {{ listData.SYS_FLD_DIGITFILENAME }}
          </span>
          <span class="tool">
            <img @click="gotoFile" src="@/assets/iconImg/look.png" alt="" />
            <img @click="goDownFile" src="@/assets/iconImg/down.png" alt="" />
          </span>
        </div>
      </div>

      <mt-popup v-model="memberModal" position="right">
        <div class="personModal">
          <div class="backWatch">
            <div class="backInside">
              <span
                @click="goBack2"
                style="
                  color: rgb(255, 255, 255);
                  position: absolute;
                  left: 0px;
                  font-size: 25px;
                  top: 50%;
                  transform: translateY(-50%);
                  cursor: pointer;
                "
                ><</span
              >
              <div class="search">{{ listData.题名 }}</div>
            </div>
          </div>
          <mt-search placeholder="搜索姓名" @input="testsearch"> </mt-search>
          <ul class="peoplelist">
            <mt-loadmore
              :top-method="loadTop"
              :bottom-method="loadBottom"
              :auto-fill="false"
              :bottom-all-loaded="allLoaded"
              ref="loadmore"
            >
              <li
                v-for="item in result"
                :key="item.UserName"
                @click="selectPerson(item)"
              >
                {{ item.RealName }}
              </li>
            </mt-loadmore>
          </ul>
        </div>
      </mt-popup>
      <!-- 在线预览功能 -->
      <mt-popup v-model="watchModal" position="top">
        <div class="backWatch">
          <div class="backInside">
            <span
              @click="watchBack"
              style="
                color: rgb(255, 255, 255);
                position: absolute;
                left: 0px;
                font-size: 25px;
                top: 50%;
                transform: translateY(-50%);
                cursor: pointer;
              "
              ><</span
            >
            <div class="search">{{ listData.题名 }}</div>
          </div>
        </div>
        <div class="onlineWatch">
          <!-- <iframe
            scrolling="no"
            id="iframe"
            :src="fileUrl"
            style="width: 100%; height: 100%"
          ></iframe> -->

            <showPdf
                      v-if="docInfo.type == 'pdf'"
                      :doctype="docInfo.type"
                      :dochref="fileUrl"
            />
        </div>
      </mt-popup>
    </template>
  </div>
</template>
<script>
import homeHead from "./searchHead.vue";  
import showPdf from "./pdf.vue";
import {
  getLocalDetail,
  getThumbVal,
  getThumb,
  getCollect,
  getPeople,
  recommendPeople,
  searchPeople,
  getPdfUrl, 
  browseIn,
  getDown
} from "@/api/home";
import { Toast, MessageBox } from "mint-ui"; 

export default {
  components: {
    homeHead: homeHead, 
    showPdf,
  },
  watch: {},
  name: "seachResult",
  data() {
    return {
      searchObj: {},
      listData: {},
      cnki: true,
      iframeUrl: "",
      goodParams: {
        dbcode: null,
        sysid: null,
        type: null,
        username: null,
        userid: null,
      },
      thumbNum: 0,
      isThumb: false,
      downNum: 0,
      isDown: false,
      memberModal: false,
      personList: [],
       docInfo: {
        type: "pdf",
      },
      result: [
        {
          title: "姓名",
          value: "value值",
        },
        {
          title: "王平",
          value: "2",
        },
        {
          title: "张飞",
          value: "3",
        },
        {
          title: "欧阳",
          value: "4",
        },
      ],
      allLoaded: false,
      pageCount: null,
      pageNow: 1,
      searchVal: "",
      fileUrl: "",
      urlData: "",
      watchModal: false,
      downUrl: null, 
      urlStatus:false, 
    };
  },
  created() {  
   this.searchObj = JSON.parse(this.$route.query.data); 
    if (this.$route.query.type === "2") { 
      this.cnki = true;
      this.listData.题名 = this.$route.query.name;
      this.iframeUrl = this.$route.query.url;
    } else {
      this.cnki = false;
      this.initLocal(null, "first"); 
    } 
    console.log(this.iframeUrl,"7-27测试");
    // 获取人员列表
    this.initPeople();
  },
  mounted() { 
    let _this = this;
    //   激活样式
    $(".gd-top a").click(function (event) {
      $(this).addClass("active").siblings("a").removeClass("active");
      if ($(this).text() === "最新") {
        _this.searchObj.orderstr = "发表时间 desc";
      } else {
        _this.searchObj.orderstr = "RELEVANT";
      }
      _this.initLocal(null, "first");
    }); 
  },
  methods: {
    // 获取赞
    thumb() {
      getThumbVal({
        dbcode: this.listData.TABLENAME.split("_")[0],
        sysid: this.listData.SYS_FLD_SYSID,
        type: "1",
        username: JSON.parse(window.localStorage.userInfo).UserName,
        userid:  JSON.parse(window.localStorage.userInfo).UserId,
      }).then((res) => {
        if (res.data) {
          this.thumbNum = Number(res.data.data.split(";")[1]);
          if (Number(res.data.data.split(";")[0]) === 1) {
            this.isThumb = true;
          } else {
            this.isThumb = false;
          }
        }
      });
    },
    down() {
      // 获取踩
      getThumbVal({
        dbcode: this.listData.TABLENAME.split("_")[0],
        sysid: this.listData.SYS_FLD_SYSID,
        type: "2",
        username: JSON.parse(window.localStorage.userInfo).UserName,
        userid: JSON.parse(window.localStorage.userInfo).UserId,
      }).then((res) => {
        if (res.data) {
          this.downNum = Number(res.data.data.split(";")[1]);
          if (Number(res.data.data.split(";")[0]) === 1) {
            this.isDown = true;
          } else {
            this.isDown = false;
          }
        }
      });
    },
    getGoodValue() {
      // 获取赞
      getThumbVal({
        dbcode: this.listData.TABLENAME.split("_")[0],
        sysid: this.listData.SYS_FLD_SYSID,
        type: "1",
        username: JSON.parse(window.localStorage.userInfo).UserName,
        userid: JSON.parse(window.localStorage.userInfo).UserId,
      }).then((res) => {
        if (res.data) {
          this.thumbNum = Number(res.data.data.split(";")[1]);
          if (Number(res.data.data.split(";")[0]) === 1) {
            this.isThumb = true;
          } else {
            this.isThumb = false;
          }
        }
      });
      // 获取踩
      getThumbVal({
        dbcode: this.listData.TABLENAME.split("_")[0],
        sysid: this.listData.SYS_FLD_SYSID,
        type: "2",
        username: JSON.parse(window.localStorage.userInfo).UserName,
        userid: JSON.parse(window.localStorage.userInfo).UserId,
      }).then((res) => {
        if (res.data) {
          this.downNum = Number(res.data.data.split(";")[1]);
          if (Number(res.data.data.split(";")[0]) === 1) {
            this.isDown = true;
          } else {
            this.isDown = false;
          }
        }
      });
    },
    goTO(className) {
      this.$router.push("/" + className);
    },
    initLocal(item, item2) {   
      this.searchObj.username = JSON.parse(window.localStorage.userInfo).UserName;
          getLocalDetail(this.searchObj).then((res) => {
            this.listData = JSON.parse(res.data.data)[0];
            if (item === "collect") {
              return;
            }
            if (item2 === "first") { 
              this.getUrlData();
            }
            // 获取点赞和踩的值。
            this.getGoodValue();
          });
    },
    goTOMore(className) {
      this.$router.push(
        "/" +
          className +
          "?type=" +
          this.searchObj.type +
          "&orderstr=" +
          this.searchObj.orderstr
      );
    },
    thumbDown(type) {
      switch (type) {
        case "up":
          getThumb({
            dbcode: this.listData.TABLENAME.split("_")[0],
            sysid: this.listData.SYS_FLD_SYSID,
            type: "1",
            username: JSON.parse(window.localStorage.userInfo).UserName,
            userid: JSON.parse(window.localStorage.userInfo).UserId,
          }).then((res) => {
            Toast({
              message: res.data.message,
              position: "center",
              duration: 1000,
            });
            this.thumb();
          });
          break;

        case "down":
          getThumb({
            dbcode: this.listData.TABLENAME.split("_")[0],
            sysid: this.listData.SYS_FLD_SYSID,
            type: "2",
            username: JSON.parse(window.localStorage.userInfo).UserName,
            userid: JSON.parse(window.localStorage.userInfo).UserId,
          }).then((res) => {
            Toast({
              message: res.data.message,
              position: "center",
              duration: 1000,
            });
            this.down();
          });
          break;
      }
    },
    collect() {
      getCollect({
        dbcode: this.listData.TABLENAME.split("_")[0],
        sysid: this.listData.SYS_FLD_SYSID,
        title: this.listData.题名,
        username:JSON.parse(window.localStorage.userInfo).UserName,
        userid:JSON.parse(window.localStorage.userInfo).UserId,
      }).then((res) => {
        Toast({
          message: res.data.message,
          position: "center",
          duration: 1000,
        });
        this.initLocal("collect");
      });
    },
    getUrlData() { 

      getPdfUrl({
        dbcode: this.listData.TABLENAME,
        sysid: this.listData.SYS_FLD_SYSID,
      }).then((res) => { 
        if (res.data.status === 0) { 
          this.urlData = res.data.data; 
          this.urlStatus = true; 
        } else { 
          this.urlStatus = false;
        }
      });
    },
    gotoFile() {
      if (!this.urlStatus) {  
        return Toast({
          message: "您访问的文件不存在",
          position: "center",
          duration: 1000,
        });
      }
      // 暂时注释掉
      // let name = this.listData.SYS_FLD_DIGITFILENAME;
      // if (name.substring(name.lastIndexOf(".") + 1) !== "pdf") {}  
      if(!this.urlData || !this.urlData.length) {
        return Toast({
          message: "此文件暂不支持预览，请下载后阅读",
          position: "center",
          duration: 1000,
        });
      } 
      browseIn({
        dbcode:this.listData.TABLENAME,
        sysid:this.listData.SYS_FLD_SYSID,
        username:JSON.parse(window.localStorage.userInfo).UserName,
      }).then(res => {
        // let data = encodeURIComponent(
        //   window.localStorage.baseUrl+"/api/Search/GetStream?absPath=" + this.urlData
        // );
        // this.fileUrl = "./static/PDF2.3.200/web/viewer.html?file=" + data;  
        //vue-pdf组件
        this.fileUrl = window.localStorage.baseUrl+"/api/Search/GetStream?absPath=" + this.urlData;     
        this.watchModal = true; 
        
      }) 

    },
    
    goDownFile() {
      if (!this.urlStatus) {
        return Toast({
          message: "您访问的文件不存在",
          position: "center",
          duration: 1000,
        });
      };
      let url =
        window.localStorage.baseUrl+ 
        "/api/Search/GetFileFromWebApi?dbcode=" +
        this.listData.TABLENAME +
        "&sysid=" +this.listData.SYS_FLD_SYSID+"&username="+JSON.parse(window.localStorage.userInfo).UserName;
        //下载调入接口 
        // getDown({
        //   dbcode:this.listData.TABLENAME,
        //   sysid:this.listData.SYS_FLD_SYSID,
        //   username:JSON.parse(window.localStorage.userInfo).UserName,
        // }).then(res=>{
        // })
       plus.runtime.openURL(url); 
    },
    recommond() {
      this.testsearch("");
      this.memberModal = true;
    },
    // 推荐列表返回
    goBack2() {
      this.memberModal = false;
    },
    // 获取人员列表
    initPeople() {
      getPeople().then((res) => {
        this.personList = JSON.parse(res.data.data);
      });
    },
    // 选择人员
    selectPerson(item) {
      MessageBox.confirm("请确认要推荐给" + item.RealName + "么？").then(
        (action) => {
          recommendPeople({
            dbcode: this.listData.TABLENAME.split("_")[0],
            sysid: this.listData.SYS_FLD_SYSID,
            title: this.listData.题名,
            username: JSON.parse(window.localStorage.userInfo).UserName,
            rename: item.UserName,
            dbname: this.listData.来源数据库,
          }).then((res) => {
            Toast({
              message: res.data.message,
              position: "center",
              duration: 1000,
            });
          });
        }
      );
    },
    // 人员返回
    personBack() {
      this.memberModal = false;
    },
    testsearch(value) {
      this.searchVal = value;
      this.getSearch();
    },
    // 检索
    getSearch() {
      searchPeople({
        username: this.searchVal,
        pagenow: this.pageNow,
        pagesize: 15,
      }).then((res) => {
        if (res.data.data) {
          this.result = JSON.parse(res.data.data);
          this.pageCount = res.data.DataCount;
        } else {
          this.result = [];
        }
      });
    },
    // 移动加载
    loadBottom() {
      if (this.pageCount - this.pageNow * 10 <= 10) {
        this.allLoaded = true; // 若数据已全部获取完毕
        return;
      }
      this.allLoaded = false;
      this.$refs.loadmore.onBottomLoaded();
      this.pageNow++;
      this.getSearch();
    },
    loadTop() {
      if (this.pageNow === 1) {
        this.allLoaded = false;
        this.$refs.loadmore.onTopLoaded();
        return;
      }
      this.pageNow--;
      this.getSearch();
    },
    watchBack() {
      this.watchModal = false;
    },
  },
};
</script>
<style lang="scss" scoped>
@import "../../assets/css/zyy_phone.css";
@import "../../assets/css/search.css";
@import "../../assets/css/searchResult.css";
@import "../../assets/css/searchDetail.less";
.list-header {
  min-height: calc(100vh - 120px);
  background: #fff;
  overflow-x: hidden;
  ul {
    width: 100%;

    li {
      width: 100%;
      padding: 0 10px;
      .img {
        display: inline-block;
        width: 32px;
        height: 32px;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .content {
        display: inline-block;
        height: 100%;
        vertical-align: top;
        width: calc(100% - 20px);
        position: relative;
        margin-bottom: 30px;

        .font {
          width: calc(100%);
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          font-size: 14px;
          display: inline-block;
          font-weight: 600;
        }
        .i {
          position: absolute;
          right: 0;
          width: 100px;
          text-align: right;
          color: #989898;
        }
      }
      .recommond {
        font-size: 14px;
        margin-top: 5px;
        color: #868686;
      }
      .set {
        margin-top: 5px;
        text-align: right;
        img {
          width: 15px;
          height: 15px;
        }
        .line:nth-child(2) {
          margin-left: 10px;
        }
      }
    }

    li:nth-child(1) {
      margin-top: 10px;
    }

    li:last-child {
      margin-bottom: 0;
    }
  }
}
.chooseMember {
  width: 100vw;
}
.file {
  width: 100%;
  height: 20px;
  color: #367bf0;
  margin-top: 20px;

  .name {
    display: inline-block;
    width: calc(100vw - 75px);
  }

  .tool {
    img {
      width: 15px;
      height: 15px;
      vertical-align: middle;
    }
    img:nth-child(2) {
      margin-left: 10px;
    }
  }
}
.classData {
  width: 100%;
  .line {
    margin-bottom: 20px;
    .name {
      font-weight: bold;
    }
    .text {
      margin-left: 10px;
    }
  }
  .line2 {
    display: inline-block;
    .name {
      font-weight: bold;
      display: inline-block;
      vertical-align: middle;
    }
    .text {
      margin-left: 10px;
    }
  }

  .line2:last-child {
    margin-left: 20px;
  }
}
// 选人弹窗样式
.personModal {
  width: 100%;
  height: 100vh;
  background: #fff;
}
.peoplelist {
  width: 100%;
  height: calc(100vh - 115px);
  line-height: 48px;
  position: fixed;
  top: 112px;
  padding: 0 10px;
  box-sizing: border-box;
  overflow: auto;
}
.backWatch {
  width: 100%;
  height: 60px;
  padding: 10px 20px;
  box-sizing: border-box;
  background: #367bf0;
  .backInside {
    padding: 0 20px;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    position: relative;

    .search {
      width: calc(100% -90px);
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      vertical-align: middle;
    }
  }
}
.onlineWatch {
  width: 100%;
  height: calc(100vh - 60px);
}
</style>